.front-matter {
    margin-top: 48px;
    @include grid(12);

    .wp-block-column:nth-child(1) {
        grid-column: 1 / 13;

        @include md-up {
            grid-column: 1 / 8;
        }

        @include lg-up {
            grid-column: 1 / 7;
        }
    }

    .wp-block-column:nth-child(2) {
        grid-column: 1 / 13;

        @include md-up {
            grid-column: 9 / 13;
        }

        @include lg-up {
            grid-column: 10 / 13;
        }
    }
}

.front-matter .btn-secondary {
    @include md-down {
        margin-top: 24px;
    }
    padding: 8px 24px;
    border: 1px solid $vermillion;
    display: inline-block;
    cursor: pointer;
    line-height: 30px;
    text-align: center;

    &:hover {
        border-color: $accent-vermillion;

        a,
        a:visited {
            color: $accent-vermillion;
        }
    }

    a,
    a:visited {
        color: $vermillion;
        text-decoration: none;
    }
}

.front-matter .wp-block-button + .related-topics,
.front-matter .wp-block-buttons + .related-topics {
    margin-top: 48px;
}

.article-content .related-topics {
    border-left: 1px solid $blue-10;
    padding-left: 24px;
    display: none;

    @include md-up {
        display: block;
    }

    p {
        @include overline-black-caps;
        color: $blue-40;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    li {
        margin-bottom: 16px;
        list-style: none;
        position: relative;
        text-underline-offset: 6px;

        a {
            @include body-3-medium;
            @include owid-link-90;
            text-decoration: none;
        }

        a:after {
            content: "";
            background-color: $blue-90;
            mask: url($right-arrow) no-repeat;
            -webkit-mask: url($right-arrow) no-repeat;
            position: absolute;
            top: 2px;
            width: 9px;
            height: 12px;
            background-repeat: no-repeat;
            margin-top: 6px;
            margin-left: 6px;
        }

        a:visited:after {
            background-color: $blue-60;
        }
    }
}
